<template>
	<div class="" >
		<div id="mse" class="!w-full !h-full aspect-video"></div>
    </div>
</template>
<script setup lang="ts">
import Player ,{ Events }from 'xgplayer';
import 'xgplayer/dist/index.min.css';
import HlsPlugin from 'xgplayer-hls'
import type { infoType } from '@/api/operate/video-management/index';
type FormProps = {
	formInline: infoType,
	isLoading: boolean,
	videoUrl: string,
	playDuration: any
}

const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false,
	videoUrl:"",playDuration: 0
});
const timer = ref(null)
onMounted(() => {
        const player = new Player({
      id: 'mse',
      url: props.videoUrl,
      plugins: [HlsPlugin],
    })

	player.on(Events.PLAY, () => {
		if (props.playDuration) {
			timer.value && clearTimeout(timer.value)
			timer.value = setTimeout(() => {
				player.pause()
			}, props.playDuration * 60 * 1000);
		} 
	})
});
onBeforeUnmount(() => {
	timer.value && clearTimeout(timer.value)
});
</script>